<template>
  <div>
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" :page-size="pageSize"  :disabled="disabled"
        layout="total, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" center/>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const emits = defineEmits(['CurrentChange'])
const props = defineProps({
  total: {
    type: Number,
    default: 100
  },
  pageSize: {
    type: Number,
    default: 10
  }
});
const disabled = ref(false)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  emits('CurrentChange',val)
}
</script>

<style lang="less" scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block{
  display: flex;
  justify-content: center;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>